<template>
  <div class="container">
    <navigate>短信验证找回</navigate>
    <div class="container_main">
      <van-cell-group class="input_outer">
        <van-field
          v-model="note.user"
          label="*申诉账号"
          placeholder="请输入申诉的账号"
        />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field
          v-model="note.phone"
          label="*绑定手机号"
          placeholder="请输入手机号"
        />
      </van-cell-group>

      <van-cell-group class="input_outer">
        <van-field
          v-model="note.auth"
          label="*短信验证码："
          placeholder="请输入验证码"
        />
        <span class="auth vertical_center" @click="sendNote"
          >获取验证码({{ timerCount }})</span
        >
      </van-cell-group>

      <van-cell-group class="input_outer">
        <van-field
          v-model="note.newPwd"
          label="*设置新密码"
          placeholder="字母+数字不超过16个字符。"
        />
      </van-cell-group>
      <div class="text">
        注：请使用与您账号进行绑定的手机号进行验证。并且保证手机号能接收到当前的验证码。
      </div>

      <button class="btn">确定找回</button>
    </div>
  </div>
</template>

<script>
import { apiNoteAppeal } from "@/api/user";
export default {
  data() {
    return {
      note: {
        user: "", //账号
        phone: "", //手机号
        newPwd: "", //新密码
        auth: "", //验证码
      },
      // 读秒
      timerCount: 60,
      timer: null,
    };
  },
  methods: {
    // 发送短信
    async sendNote() {
      if (!this.note.user) return this.$toast.fail("请输入账号！");
      if (!this.note.phone) return this.$toast.fail("请输入绑定手机号！");
      const {data} = await apiNoteAppeal();

    },
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>